<template>
  <div
    v-if="props.img"
    :class="props.position === 'top' ? 'border-bottom line-item-top-img' : 'border-top line-item-bottom-img'"
    class="w-100 position-relative line-item pl-12 border-dotted border-color-dark"
  >
    <div :class="props.position === 'top' ? 'circle-top' : 'circle-bottom'" class="circle"></div>
    <div :class="props.position === 'bottom' ? '':'flex-reverse'">
      <div :class="props.position === 'top' ? 'vertical-line-top': 'vertical-line-bottom'" class="svertical-line"></div>
      <span class="text-36 font-weight-bold">{{props.title}}.</span>
      <p class="text-gray-light4 text-14 line-height-25 width-26">{{props.content}}</p>
      <img v-if="props.img" :src="props.img" alt="pic">
    </div>
  </div>
  <div
    v-else
    :class="props.position === 'top' ? 'border-bottom line-item-top' : 'border-top line-item-bottom'"
    class="w-100 position-relative line-item pl-12 border-dotted border-color-dark"
  >
    <div :class="props.position === 'top' ? 'circle-top' : 'circle-bottom'" class="circle"></div>
    <div v-if="props.position === 'bottom'">
      <div class="svertical-line vertical-line-bottom"></div>
      <span class="text-36 font-weight-bold">{{props.title}}.</span>
      <p class="text-gray-light4 text-14 line-height-25 width-26 mt-6">{{props.content}}</p>
    </div>
    <div v-if="props.position === 'top'">
      <span class="text-36 font-weight-bold">{{props.title}}.</span>
      <p class="text-gray-light4 text-14 line-height-25 width-26 mt-6">{{props.content}}</p>
      <div class="svertical-line vertical-line-top"></div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: '',
    required: true
  },
  content: {
    type: String,
    default: '',
    required: false
  },
  position: {
    type: String,
    default: 'bottom',
    required: false
  },
  img: {
    type: String,
    default: '',
    required: false
  }
})
</script>

<style lang="scss" scoped>
.line-item{
  width: 325px;
  .circle{
    border: 4px solid #646464;
    transition: all 0.5s ease;
  }
  .svertical-line{
    background: #000;
  }
}
.line-item:hover{
  .circle{
    border: 4px solid #ff5a2d;
    transform: scale(1.1);
  }
  .svertical-line{
    background: #ff5a2d;
  }
}
.line-item-top {
  height: 301px;
  padding-bottom: 70px;
}
.line-item-bottom {
  margin-top: 300px;
  height: 300px;
  padding-top: 70px;
}
.line-item-top-img {
  height: 571px;
  padding-bottom: 70px;
}
.line-item-bottom-img {
  margin-top: 570px;
  height: 655px;
  padding-top: 70px;
}
.circle{
  position: absolute;
  left: 60px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
}
.circle-top{
  bottom: -25px;
}
.circle-bottom{
  top: -25px;
}
.svertical-line{
  width: 1px;
  height: 85px;
  margin-left: 25px;
}
.vertical-line-top{
  margin-top: 20px;
}
.vertical-line-bottom{
  margin-bottom: 20px;
}
</style>
